<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>评论</title>
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="lib/vue.min.js"></script>
    <script type="text/javascript" src="lib/jquery-1.11.3.min.js"></script>	
</head>
<body>
  <div id="comment">
    <!--登录-->
    <div class="loginbox" v-show="loginStatus" @click="loginboxClick()" style="display:none;">
      <div class="box" @click="stopProp()">
        <h3>用户登录</h3>
        <form name="login" id="login">
            <input type="text" placeholder="请输入用户名" class="username">
            <input type="password" placeholder="请输入登录密码" class="psw">
            <input type="button" value="立即登录" @click="login()">
            <input type="button" value="立即注册" @click="showregister()" class="blueBtn">
        </form>
      </div>
    </div>
    <!--登录-->
    <!--注册-->
    <div class="loginbox registerbox" v-show="registerStatus" @click="registerboxClick()" style="display:none;">
        <div class="box" @click="stopProp()">
            <h3>用户注册</h3>
            <form name="register" id="register">
                <input type="text" placeholder="请输入用户名" class="username">
                <input type="password" placeholder="请输入登录密码" class="psw">
                <input type="button" value="立即注册" @click="register()">
                <input type="button" value="立即登录" @click="showLogin()" class="blueBtn">
            </form>
        </div>
    </div>
    <!--注册-->
    <!--评论-->
    <div class="commentbox">
        <div class="userbar" v-show="userbarStatus" style="display:none;">
            <img :src="'/unit10/case01-登录注册评论/img/'+currentUser.userimg" alt="" title="" class="userimg">
            <span class="loginout" @click="loginout()">退出登录&nbsp;&nbsp;<i class="icon-style icon-signout"></i></span>
            <span class="username" v-text="currentUser.username"><i class="icon-style icon-user-md">&nbsp;</i></span>
            <p><span class="userword" v-text="currentUser.words" contenteditable="false"></span><i class="icon-style icon-edit" @click="editUserWords()"></i></p>
        </div>
        <div class=" commemtlist ">
            <dl v-for="(value, index) in comments ">
                <dt>
                    <img :src=" 'img/'+value.userimg ">
                    <span class="username ">{{value.username}}</span>
                </dt>
                <dd class="commentwords "><i class="icon-style icon-file-alt "></i>{{value.words}}</dd>
                <dd class="btbar ">
                    <span class="like red "><i class="icon-style icon-thumbs-up "></i>点赞(<strong @click="like(index) ">{{value.like}}</strong>)</span>
                    <span class="notlike red "><i class="icon-style icon-thumbs-down "></i>点踩(<strong @click="notlike(index) ">{{value.nolike}}</strong>)</span>
                    <span class="data red "><i class="icon-style icon-calendar "></i>时间<strong>{{value.time}}</strong></span>
                </dd>
            </dl>
            <div class="wordsbox ">
                <textarea placeholder="请留言"></textarea>
                <span @click="showLogin()" v-show="lrBtnStatus">登录</span>
                <span @click="showregister()" v-show="lrBtnStatus">注册</span>
                <input type="submit" value="提交 " @click="subCommont()" />
            </div>
        </div>
    </div>
    <!--评论-->
  </div>
  <script src="js/index.js "></script>
</body>
</html>
